<template>
    <div class="search_bar">

        <div class="back">

        </div>
        <div class="bt_search">

            登录

        </div>
        <div class="add">


        </div>
    </div>

    <div class="line"></div>

    <el-form :model="form" label-width="20%" class="create_acitvity_form">
        <el-form-item label="学号">
            <el-input v-model="form.account" class="w-100" placeholder="请输入学号" />
        </el-form-item>
        <el-form-item label="密码"> 
            <el-input v-model="form.password" class="w-100" type="password" placeholder="请输入密码" show-password />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
            <el-button type="primary" @click="onReg">注册</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { reqLogin } from "@/api/login/index.ts";
import useUserStore from '@/stores/user';
const router = useRouter()
// do not use same name with ref
const form = reactive({
    account: '',
    password: '',
    student_college_id: 1

})

const onSubmit = () => {

    reqLogin(form).then((res: any) => {
        const userStore = useUserStore();


        userStore.setLogin(res.data.userinfo);
        router.push('/home')
    });


}
const onReg = () => {


    router.push('/my_reg')



}



</script>

<style scoped lang="scss">
@font-face {
    font-family: OPPOSans-H;
    src: url('../../assets/OPPOSans-H.ttf');
}

.create_acitvity_form {
    margin-top: 10px;
}


.search_bar {

    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .back {

        width: 30px;
        margin-left: 10px;

    }

    .bt_search {
        width: 280px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
}


.line {
    width: 100%;
    height: 10px;
    background-image: url('../../assets/images/homepage/line.png');
    background-size: contain;
}


.w-100 {
    width: 250px;
}
</style>